﻿@using PartsUnlimited
@model PartsUnlimited.ViewModels.ShoppingCartViewModel
@inject AntiForgery Xsrf
@{
    ViewBag.Title = "Shopping Cart";
}

@functions
{
    public string GetAntiXsrfToken()
    {
        var tokens = Xsrf.GetTokens(Context, null);
        return $"{tokens.CookieToken}:{tokens.FormToken}";
    }
}

@section Scripts {
    <script type="text/javascript">
        $(function () {
            // Document.ready -> link up remove event handler
            $(".remove-link").click(function () {
                // Get the id from the link
                var recordToDelete = $(this).attr("data-id");
                var PostToUrl = $(this).attr("data-url");
                if (recordToDelete != '') {

                    // Start telemetry timer for post
                    appInsights.startTrackEvent(recordToDelete);

                    // Perform the ajax post
                    $.post(PostToUrl, { "id": recordToDelete, "RequestVerificationToken": '@GetAntiXsrfToken()' },
                        function (data) {
                            // Successful requests get here
                            // Update the page elements
                            if (data.CartCount == 0) {
                                $('#cart-summary').hide();
                                $('#cart-count').hide();
                                $('#empty-cart').show();
                            } else {

                                if (data.ItemCount == 0) {
                                    $('#row-' + data.DeleteId).fadeOut('slow');
                                } else {
                                    $('#item-count-' + data.DeleteId).text(data.ItemCount);
                                }
                            }
                            $('#cart-sub-total').text(data.CartSubTotal);
                            $('#cart-shipping').text(data.CartShipping);
                            $('#cart-tax').text(data.CartTax);
                            $('#cart-total').text(data.CartTotal);
                            $('#update-message').text(data.Message);
                            $('#cart-status').text('Cart (' + data.CartCount + ')');
                            $('#cart-count').text(data.CartCount);
                        });

                    // Log timing event for delete process
                    appInsights.stopTrackEvent(recordToDelete);
                }
            });

        });
    </script>
}
<div id="shopping-cart-page">
    <section>
        <h2>Review your Cart</h2>
        <div id="update-message">
        </div>
        @if (Model.CartCount > 0)
        {
            <div id="cart-summary">
                <div class="hidden-xs cart-summary-header">
                    <div class="row">
                        <div class="col-sm-8 col-md-8 no-gutter-md-left no-gutter-sm-left">Product Description</div>
                        <div class="col-sm-2 col-md-2 text-center">Quantity</div>
                        <div class="col-sm-2 col-md-2 text-center">Price</div>
                    </div>
                </div>

                @foreach (var item in Model.CartItems)
                {
                    <div id="row-@item.CartItemId" class="cart-item">
                        <div class="row">
                            <div class="col-xs-1 no-gutter-xs-right text-center-xs col-sm-2 col-sm-push-8 text-center-sm">
                                <div class="item-label item-inventory">@item.Count</div>
                            </div>
                            <div class="col-xs-3 col-sm-3 col-sm-pull-2 col-md-2">@Html.Image(item.Product.ProductArtUrl)</div>
                            <div class="col-xs-6 col-sm-2 col-sm-push-5 text-center-sm col-md-push-6">
                                <div class="visible-xs item-label">@item.Product.Title</div>
                                <div class="item-price">@item.Product.Price.ToString("C")</div>
                            </div>
                            <div class="visible-xs col-xs-2 text-right no-gutter-xs-left">
                                <a href="#" class="remove-link" data-id="@item.CartItemId"
                                   data-url='@Url.Content("~/ShoppingCart/RemoveFromCart")'>
                                    @Html.Image("remove_icon.png", "remove from cart icon")
                                </a>
                            </div>
                            <div class="col-xs-12 col-sm-5 col-sm-pull-4 col-md-6 description">
                                <div class="hidden-xs"><strong>@Html.ActionLink(item.Product.Title, "Details", "Store", new { id = item.ProductId }, null)</strong></div>
                                <div class="visible-xs item-label">Description</div>
                                <p class="text-content">@item.Product.Description</p>
                            </div>
                            <div class="hidden-xs remove-cart-item">
                                <a href="#" class="remove-link btn" data-id="@item.CartItemId"
                                   data-url='@Url.Content("~/ShoppingCart/RemoveFromCart")'>
                                    Remove
                                </a>
                            </div>
                        </div>
                    </div>
                }

                @Html.Partial("_OrderCostSummary", Model.OrderCostSummary)
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8">
                        <div>
                            @Html.ActionLink("Checkout", "AddressAndPayment", "Checkout", null, new { @class = "btn pull-right checkout" })
                        </div>
                    </div>
                </div>
            </div>
        }
        <h4 id="empty-cart" @if (Model.CartCount > 0) { <text> style="display:none;" </text> }>Your cart is currently empty</h4>
    </section>
</div>